<!-- Created by mhy on 2018/6/27.

 -->
<template>
<div class="frame-index">
    <div class="frame-content">

      <div class="frame-left">
        <div class="f-title">
          筛选
          <div @click="$router.back()">&lt;-</div>
        </div>
        <form class="frame-left-search" action="#">
          <input class="frame-search-input"  type="search"
            placeholder="搜索 商户ID/手机/设备ID"
            @keydown.enter="searchData"
                 v-model="inputSearch">
        </form>
        <div class="frame-left-dist"></div>

        <x-select-option v-model="value1" :options="options1" title="厂家" class="m-mb-10" @change="changeSearch(1)"/>
        <x-select-option v-model="value2" :options="options2" title="色系" class="m-mb-10" @change="changeSearch(2)"/>
        <x-select-option v-model="value3" :options="options3" title="风格" class="m-mb-10" @change="changeSearch(3)"/>
        <x-select-option v-model="value4" :options="options4" title="付费类型" class="m-mb-10" @change="changeSearch(4)"/>
        <x-select-option v-model="value5" :options="options5" title="状态" class="m-mb-10" @change="changeSearch(5)"/>
        <div class="block-item">
          <div class="block-im">
            <div class="pm">2019年新款框条</div>
            <div class="ph">loralisa洛卡丽萨，欢迎各位商户体验，6折优惠抢购</div>
          </div>
          <div class="block-it"></div>
        </div>
      </div>

      <div class="frame-right">
        <div class="x-frame-title">
          <div class="x-frame-title-text">框条素材库</div>
        </div>
        <div class="frame-right-header">
          <p class="frame-right-title">搜索</p>
          <div class="frame-right-search" v-show="inputSearch2.length > 0">
            <p class="frame-right-search-title">{{inputSearch2}}</p>
            <img class="" src="xxx.png" @click="research">
          </div>
          <p class="frame-right-search-content" v-for="(item,index) in searchList" :key="index">{{item}}</p>
          <p class="frame-right-allitems">共{{frameCount}}个</p>
        </div>
        <div class="frame-right-dist"></div>
        <div class="frame-right-list">
          <x-materia-detail-item v-for="(item, key) in frameList" :item="item" :key="key" @click.native="showDetail(item)"/>
        </div>
        <div class="frame-right-dist-1"></div>

        <div class="frame-right-footer" style="margin-bottom: 100px;">
          <p class="frame-right-footer-txt" @click="addPage">上一页</p>
          <p class="frame-right-footer-txt">{{pageIndex}} / {{Math.ceil(this.frameCount / this.pageSize)}}</p>
          <p class="frame-right-footer-txt" @click="minusPage">下一页</p>
          <input class="frame-right-page-input" v-model.number="pageIndex" type="number"  onkeyup="value=value.replace(/[^\d]/g,'')">
          <p class="frame-right-footer-search" @click="toPage">跳转</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {mapActions,mapState} from 'vuex'
    export default {
      data() {
        return{
          inputSearch:'',
          inputSearch2:'',
          searchList:[],
          value1: '0',
          value2: '0',
          value3: '0',
          value4: '0',
          value5: '0',
          options1:this.$store.state.login.factoryOptionsSelect,
          options2:[{value: '0', label: '全部'},{value: '1', label: '红色'},{value: '2', label: '黄色'},{value: '3', label: '绿色'}],
          options3:[{value: '0', label: '全部'},{value: '1', label: '国画框'},{value: '2', label: '油画框'},{value: '3', label: '婚纱框'}],
          options4: [{value: '0', label: '全部'},{value: '1', label: 'VIP'},{value: '2', label: '免费'}],
          options5:[{value: '0', label: '全部'},{value: '1', label: '上架'},{value: '2', label: '下架'}],
          pageIndex: 1,
          pageSize: 5,
        }
      },
      components:{

      },
      methods: {
        ...mapActions([
          'getFrameList'
        ]),
        research () {
          this.inputSearch = ''
          this.inputSearch2 = ''
          this.searchFrame()
        },

        addPage () {
          if (this.page <= 1) {
            return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
          }
          this.pageIndex -= 1
          this.searchFrame()
        },
        minusPage () {
          if (this.page >= Math.ceil(this.frameCount / this.pageSize)) {
            return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
          }
          this.pageIndex += 1
          this.searchFrame()
        },
        toPage (page) {
          if (page < 1) {
            return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
          } else if (page > Math.ceil(this.frameCount / this.pageSize)) {
            return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
          }
          this.pageIndex = Number(document.getElementById('pageinput').value)
          this.searchFrame()
        },
        changeSearch(index){
          this.searchList.length = 0
          if(this.value1 != '0'){
            this.searchList.push(this.options1[Number(this.value1)].label)
          }
          if(this.value2 != '0'){
            this.searchList.push(this.options2[Number(this.value2)].label)
          }
          if(this.value3 != '0'){
            this.searchList.push(this.options3[Number(this.value3)].label)
          }
          if(this.value4 != '0'){
            this.searchList.push(this.options4[Number(this.value4)].label)
          }
          if(this.value5 != '0'){
            this.searchList.push(this.options5[Number(this.value5)].label)
          }
          this.pageIndex = 1;
          this.searchFrame()
        },
        searchData (e) {
          this.inputSearch2 = this.inputSearch.trim()
          this.pageIndex = 1
          this.searchFrame()
          e.preventDefault()
        },
        handleCurrentChange (page) {
          this.loadDataList(page)
        },
        searchFrame() {
          let params = {action:"getlist",page:this.pageIndex,pagesize:this.pageSize};
          if(this.value1 != '0'){
            params["factory"] = this.options1[Number(this.value1)].factoryid
          }
          if(this.value2 != '0'){
            params["color"] = this.options2[Number(this.value2)].label
          }
          if(this.value3 != '0'){
            params["style"] = this.options3[Number(this.value3)].label
          }
          if(this.value4 != '0'){
            params["paytype"] = this.options4[Number(this.value4)].label
          }
          if(this.value5 != '0'){
            params["state"] = this.options5[Number(this.value5)].label
          }
          if(this.inputSearch2.length > 0){
            params['search'] = this.inputSearch2
          }
          this.getFrameList(params);
        },
        showDetail (item) {
          this.$router.push({
            path: '/material/detail',
            query: {
              id: item.id
            }
          })
        },
        loadDataList (page) {
          this.page = page
        }
      },
      computed: {
        ...mapState({
          factoryOptionsSelect: state => state.login.factoryOptionsSelect,
          frameList: state => state.material.frameList,
          frameCount: state => state.material.frameCount,
        }),
//        searchList () {
//          return [this.regist, this.state, this.charge].map(val => {
//            if (val) {
//              return this.typeObj[val]
//            }
//          })
//        }
      },
      mounted (){
        let params = {action:"getlist",page:this.pageIndex,pagesize:this.pageSize};
        this.getFrameList(params);
      }
    }
</script>

<style scoped lang="scss">
  @import './material.scss';
</style>
